<template>
    <div id="container" ></div>  
</template>
<script>

import Highcharts from 'highcharts/highstock';
import Oldie from 'highcharts/modules/oldie.js';
import Networkgraph from 'highcharts/modules/networkgraph.js';
import Exporting from 'highcharts/modules/exporting.js'
import Points from 'highcharts/modules/draggable-points.js'

export default {
    data(){
        return{
            enableSimulation:true,
            linkLength:30,
        }
    },
    mounted(){
        this.init();
        this.drawRiverGragh();
        //自适应
        window.onresize = () => {
        // 这里使用箭头函数，避免this指向问题
            this.drawRiverGragh();
        };
    },
    methods:{
        init(){
            Networkgraph(Highcharts); // annotations插件
            Oldie(Highcharts); // label插件
            Exporting(Highcharts); // exporting插件
            Points(Highcharts)
        },
        drawRiverGragh(){
            Highcharts.setOptions({
                lang: {
                    downloadJPEG: "下载JPEG 图片" , 
                    downloadPDF: "下载PDF文档"  ,
                    downloadPNG: "下载PNG 图片"  ,
                }
            });
            Highcharts.chart('container', {
                // 图标类型
                chart: {
                    type: 'networkgraph',
                    height: '80%',
                    // 背景颜色
                    backgroundColor:'rgb(16,41,72)',
                },
                // 标题
                title: {
                    text: ''
                },
                // 关系图设置
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        color: '#fff',
                        marker: {
                            radius: 7
                        },
                        dragDrop: {
                            draggableX: true,
                            draggableY: true,
                        },
                        point: {
                            events: {
                                click: function () {
                                    this.enableSimulation = false;
                                    this.drawRiverGragh();
                                }
                            }
                        }
                    },
                    networkgraph: {
                        keys: ['from', 'to'],
                        layoutAlgorithm: {
                            enableSimulation: this.enableSimulation,
                            integration: 'euler',
                            linkLength: this.linkLength, //分散距离
                            maxIterations:300,
                            maxSpeed:50,
                                             
                        },
                        
                    },
                },
                // 导出列表自定义内容
                exporting:{
                    scale: 4,
                    buttons: {
                        contextButton: {
                            menuItems:["downloadPDF","downloadPNG","downloadJPEG",],
                        },
                    },    
                },
                // 去除下标
                credits: {
                    enabled:false
                },
                // 关系图图像+数据
                series: [{
                    dataLabels: {
                        enabled: true,
                        linkFormat: '',
                    },
                    boostThreshold:20,
                    animation: false,
                    data: [
                        ['Proto Indo-European', 'Balto-Slavic'],
                        ['Proto Indo-European', 'Germanic'],
                        ['Proto Indo-European', 'Celtic'],
                        ['Proto Indo-European', 'Italic'],
                        ['Proto Indo-European', 'Hellenic'],
                        ['Proto Indo-European', 'Anatolian'],
                        ['Proto Indo-European', 'Indo-Iranian'],
                        ['Proto Indo-European', 'Tocharian'],
                        ['Indo-Iranian', 'Dardic'],
                        ['Indo-Iranian', 'Indic'],
                        ['Indo-Iranian', 'Iranian'],
                        ['Iranian', 'Old Persian'],
                        ['Old Persian', 'Middle Persian'],
                        ['Indic', 'Sanskrit'],
                        ['Italic', 'Osco-Umbrian'],
                        ['Italic', 'Latino-Faliscan'],
                        ['Latino-Faliscan', 'Latin'],
                        ['Celtic', 'Brythonic'],
                        ['Celtic', 'Goidelic'],
                        ['Germanic', 'North Germanic'],
                        ['Germanic', 'West Germanic'],
                        ['Germanic', 'East Germanic'],
                        ['North Germanic', 'Old Norse'],
                        ['North Germanic', 'Old Swedish'],
                        ['North Germanic', 'Old Danish'],
                        ['West Germanic', 'Old English'],
                        ['West Germanic', 'Old Frisian'],
                        ['West Germanic', 'Old Dutch'],
                        ['West Germanic', 'Old Low German'],
                        ['West Germanic', 'Old High German'],
                    ]
                }]
            });
        },
    },
    
}

</script>
<style scoped>
    #container {
        height: calc(100vh - 84px);
        margin: 0 auto;
        border: 1px solid rgb(102,177,255);
        border-radius: 4px;
    }
</style>